/* * @Author: xie.zzh * @Date: 2023-11-06 16:45:44 * @Last Modified by: xie.zzh
* @Last Modified time: 2023-11-06 16:45:44 */
<template>
  <div>
    <!--    不合格数输入-->
    <van-popup
      :close-on-click-overlay="false"
      closeable
      style="width: 80vw;max-height: 60vh;overflow-y: auto;"
      v-model="unqualifiedItemModal"
      :showConfirmButton="false"
    >
      <div
        class="title"
        style="height: 50px;line-height: 50px;text-align: center;"
      >
        {{ title }}
      </div>
      <div slot="default" class="unqualified-item-cont">
        <div
          v-for="item in unqualifiedItemList"
          :key="item.id"
          class="unqualified-item"
        >
          <div class="name">{{ item.label }}</div>
          <input
            v-model="item.num"
            placeholder="请输入"
            class="my-ipt"
            @input="disqualificationChange(item)"
          />
        </div>
      </div>
      <div class="bottom-tools">
        <div class="bottom-left">
          <div style="margin-right: 2px;">不合格项：{{ sum2 }}</div>
          <div>总数：{{ sum }}</div>
        </div>
        <div class="bottom-right">
          <div class="cancel-btn" @click="cancel">取消</div>
          <div class="confirm-btn" @click="confirmSubmit">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Tip } from "@/utils";

export default {
  name: "unqualifiedItemDialog",
  props: {
    unqualifiedItemList: {
      type: Array,
      default() {
        return []; // 不合格项列表
      },
    },
    title: {
      type: String,
      default() {
        return "不合格数输入";
      },
    },
    clickItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      sum: 0,
      sum2: 0, //不合格原因选了几项
      unqualifiedItemModal: false, // 填写不合格项数量
    };
  },
  watch: {
    // 重置表单输入内容
    unqualifiedItemModal() {
      // if (!this.unqualifiedItemModal) {
      //   // this.copyData.forEach(item => {
      //   //   // item.num = ''
      //   // })
      // }
    },
    unqualifiedItemList: {
      handler() {
        this.sum = 0;
        this.sum2 = 0;
        this.unqualifiedItemList.forEach((item) => {
          if (item.num > 0) {
            this.sum += item.num * 1;
            this.sum2++;
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    // 不合格项数据变化(不能大于当前批次已输检验数)
    disqualificationChange(itm) {
      const sum = this.unqualifiedItemList.reduce(
        (total, item) => total + Number(item.num || 0),
        0
      );
      console.log(sum);
      if (sum > Number(this.clickItem.checkNum)) {
        itm.num = "";
        Tip.error("当前不合格数必须等于输入的检验数！");
        return;
      }
    },
    // 提交
    confirmSubmit() {
      let valid = this.unqualifiedItemList.every((item) => item.num > 0);

      let unqualifiedList = this.unqualifiedItemList.filter((item) => {
        return item.num !== "";
      });

      let sum2 = unqualifiedList.map((item, index) => {
        return item.label + ":" + item.num;
      });

      const sum = this.unqualifiedItemList.reduce(
        (accumulator, currentValue) => accumulator * 1 + currentValue.num * 1,
        0
      );
      this.$emit("getValue", {
        sum: sum,
        sum2: sum2.join(),
        unqualifiedList: unqualifiedList,
        unqualifiedItemList:this.unqualifiedItemList
      });
      this.unqualifiedItemModal = false;
    },

    cancel() {
      this.unqualifiedItemModal = false;
    },
    open(query) {
      this.unqualifiedItemModal = true;
      // this.copyData = JSON.parse(JSON.stringify(this.unqualifiedItemList))
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
@import "@/views/workManagement/materialRequisition/materialForm.scss";

.bottom-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-top: 1px solid #eee;
  margin-top: 10px;
}

.bottom-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom-right {
  display: flex;

  div {
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    margin-right: 10px;
  }

  .cancel-btn {
  }

  .confirm-btn {
    background-color: #1890ff;
    color: #fff;
  }
}

/deep/ .van-dialog__header {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.unqualified-item-cont {
  padding: 0 20px;
}

.unqualified-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* 统一的基本样式 */
.my-ipt {
  border: 1px solid #ccc;
  width: 90px;
  padding: 0 5px;
}

.my-ipt::placeholder {
  color: #999;
  font-size: 13px;
  font-weight: normal;
}

/* 圆角边框样式 */
.my-ipt.rounded {
  border-radius: 5px;
}

/* 渐变背景样式 */
.my-ipt.gradient {
  background: linear-gradient(to right, #ff9966, #ff5e62);
  color: #fff;
}

/* 阴影效果样式 */
.my-ipt.shadow {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 悬浮效果样式 */
.my-ipt.hover {
  transition: border-color 0.3s ease-in-out;
}

.my-ipt.hover:hover {
  border-color: #ff9900;
}

/* 渐变边框样式 */
.my-ipt.gradient-border {
  border: none;
  background: linear-gradient(to right, #ff9966, #ff5e62);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wrap-apply {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.search-content {
  flex-grow: 1;
  //  padding-bottom: 0.5rem;
  position: static;
  // top: 0.42rem;
  width: 100%;
  // height: calc(100% - 1rem)!important;
  background: #f5f5f5;
  overflow-y: auto;
  // z-index: 99;
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
}

.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem;
}

/deep/ .van-nav-bar {
  z-index: 99;
}

/deep/ .van-sidebar-item--select::before {
  color: #1890ff;
  background-color: #1890ff;
}

/deep/ .van-tree-select__item--active {
  color: #1890ff;
}

.unqualified-item-cont {
  max-height: 65vh;
  overflow-y: auto;
}
</style>
